<!DOCTYPE html>

<html>
<head data-live-domain="jquery.com">
<meta charset="ISO-8859-1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
	
<script>

var FracaoControler = {
		
		divisoes:0,
		
		carregaQuadrado:function(wrap){
			FracaoControler.divisoes=0;
			$("#"+wrap).html("");
			
			var txt = "<rect class='shape'  style='fill:yellow;' x='10' y='10' width='210' height='210' /><text class='text1' style='fill:#333;' x='105' y='120'>1</text>";
			
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt+"</svg>");
			
		},
		carregaQuadradoDividido2:function(wrap){
			FracaoControler.divisoes=2;
			//alert(FracaoControler.divisoes);
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:green;' x='10' y='10' width='210' height='105' /><text class='text1' x='105' y='62.5'>1/2</text>";
			var txt2 = "<rect class='shape'  style='fill:green;' x='10' y='125' width='210' height='105' /><text class='text1' x='105' y='180'>1/2</text>";
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+"</svg>");
		},
		carregaQuadradoDividido4:function(wrap){
			FracaoControler.divisoes=4;
			//alert(FracaoControler.divisoes);
			$("#"+wrap).html("");
			var txt1 = "<rect class='shape'  style='fill:red;' x='10' y='10' width='105' height='105' /><text class='text1' x='52.5' y='62.5'>1/4</text>";
			var txt2 = "<rect class='shape'  style='fill:red;' x='10' y='125' width='105' height='105' /><text class='text1' x='52.5' y='180'>1/4</text>";
			var txt3 = "<rect class='shape'  style='fill:red;' x='125' y='10' width='105' height='105' /><text class='text1' x='170' y='62.5'>1/4</text>";
			var txt4 = "<rect class='shape'  style='fill:red;' x='125' y='125' width='105' height='105' /><text class='text1' x='170' y='180'>1/4</text>"
			$("#"+wrap).append("<svg  height='400' width='400' x='0' y='0' viewBox='0, 0, 400,400' class='main'>"+txt1+txt2+txt3+txt4+"</svg>");
		}
}

$(function(){
	
	FracaoControler.carregaQuadrado("workspace");
	
	$(".dividir").click(function(){
		if(FracaoControler.divisoes===0){
			FracaoControler.carregaQuadradoDividido2("workspace");
		}else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadradoDividido4("workspace");
		}
	});
	
	$(".voltar").click(function(){
		if(FracaoControler.divisoes===4) {
			FracaoControler.carregaQuadradoDividido2("workspace");
		}
		else if(FracaoControler.divisoes===2){
			FracaoControler.carregaQuadrado("workspace");
		}
	});
	
});


</script>
<style>
.text1 {
	fill: #fff;
}
</style>
</head>
<body>	
<div id="workspace" style="height:300px">
</div>
<button class="dividir btn">Dividir</button><button class="voltar btn">Voltar</button>
</body>
</html>
